<div class="row flex-items-xs-between values-header">
    <div *ngIf="valueMode" class="title-container">
        <label>{{'HELM_CHART.SHOW_KV' | translate }}</label>
    </div>
    <div *ngIf="!valueMode" class="title-container">
        <label>{{'HELM_CHART.SHOW_YAML' | translate }}</label>
    </div>
    <div class="switch-container">
        <span class="card-btn" (click)="showYamlFile(false)" (mouseenter)="mouseEnter('value') " (mouseleave)="mouseLeave('value')">
            <clr-icon size="24" shape="view-list" title='list values' [ngClass]="{'is-highlight': isValueMode || isHovering('value') }"></clr-icon>
        </span>
        <span class="list-btn" (click)="showYamlFile(true)" (mouseenter)="mouseEnter('yaml') " (mouseleave)="mouseLeave('yaml')">
            <clr-icon size="24" shape="file" title="yaml file" [ngClass]="{'is-highlight': !isValueMode || isHovering('yaml') }"></clr-icon>
        </span>
    </div>
</div>

<div class="row value-container">
    <div class="col-xs-8" *ngIf="valueMode">
        <table class="table">
            <tbody>
                <tr *ngFor="let key of objKeys(values)">
                    <td class="left">{{key}}</td>
                    <td class="left">{{values[key]}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-xs-8" *ngIf="!valueMode">
        <div class="yaml-container" [innerHTML]="yaml | language : 'yaml' | markdown"></div>
    </div>
</div>